<template>
  <div class="addDoctor">
    <!-- 医生基本信息 -->
    <div>
      <div class="addDoctorTitle">医生基本信息</div>
      <div class="flexSpace" style="padding: 32px 0 0 0">
        <!-- 上传头像 -->
        <div style="">
          <!-- 上传头像啊 -->

          <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            name="file"
            :data="dataObj"
          >
            <img v-if="sendMsg.avatar" :src="sendMsg.avatar" class="avatar" />
            <div v-else>
              <img
                src="../icon/avator.svg"
                alt=""
                style="width: 100px; margin-bottom: 16px"
              />

              <el-button class="dialogBtn" round>上传头像</el-button>
            </div>
          </el-upload>
        </div>
        <!-- 右侧 -->
        <div style="width: 80%">
          <div class="flexSpace" style="padding: 0 0 20px 0">
            <div class="flexLeft">
              <div class="inputTitle">医生编号</div>
              <el-input
                v-model="sendMsg.proRuleId"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="flexLeft">
              <div class="inputTitle">医生姓名</div>
              <el-input
                v-model="sendMsg.doctorName"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="flexSpace">
            <div class="flexLeft">
              <div class="inputTitle">选择性别</div>
              <el-select
                v-model="sendMsg.gender"
                placeholder="请选择"
                style="width: 172px"
              >
                <el-option
                  v-for="item in genderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="flexLeft">
              <div class="inputTitle">移动电话</div>
              <el-input
                v-model="sendMsg.mobile"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 医生职业信息 -->
    <div>
      <div class="addDoctorTitle">医生职业信息</div>
      <div class="flexLeft" style="padding: 16px 0 20px 0; width: 80%">
        <div class="flexLeft" style="padding: 0 85px 0 0">
          <div class="inputTitle">医生职称</div>
          <el-input
            v-model="sendMsg.typeCode"
            placeholder="请输入内容"
            style="width: 172px"
          ></el-input>
        </div>
        <div class="flexLeft">
          <div class="inputTitle">医生工龄</div>
          <el-input
            v-model="sendMsg.practiceYear"
            placeholder="请输入内容"
            style="width: 172px"
          ></el-input>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 医生背景认证 -->
    <div>
      <div class="addDoctorTitle">医生背景认证</div>
      <div class="flexLeft" style="padding: 16px 0 20px 0; width: 80%">
        <div class="flexLeft" style="padding: 0 85px 0 0">
          <div class="inputTitle">罗慕认证</div>
          <el-select
            v-model="sendMsg.level"
            placeholder="请选择"
            style="width: 172px"
          >
            <el-option
              v-for="item in luomuLeavel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flexLeft">
          <div class="inputTitle">医生背景</div>
          <el-select
            v-model="sendMsg.professional"
            placeholder="请选择"
            style="width: 172px"
          >
            <el-option
              v-for="item in doctorProfessional"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 医生工作门诊 -->
    <div>
      <div class="addDoctorTitle">医生工作门诊</div>
      <div>
        <div class="flexLeft" style="width: 80%">
          <div class="flexLeft" style="flex: 1; padding: 0 85px 0 0">
            <div class="inputTitleNopoint">选择门诊</div>
            <el-select
              v-model="chooseClinicList"
              multiple
              placeholder="请选择"
              style="width: 172px"
              @change="clinicChange"
            >
              <el-option
                v-for="item in clinicList"
                :key="item.id"
                :label="item.clinicName"
                :value="JSON.stringify(item)"
              >
              </el-option>
            </el-select>
          </div>
          <div style="flex: 1" class="flexLeft">
            <div style="padding: 0 10px 0 0">
              <img src="../icon/eyes.png" alt="" />
            </div>
            <div>隐藏其他工作门诊</div>
          </div>
        </div>
        <div class="flexLeft" style="padding: 23px 0">
          <div class="inputTitleNopoint">已选择:&nbsp;&nbsp;</div>
          <div class="flexLeft">
            <tag
              v-for="(item, index) in chooseClinicList"
              :key="index"
              :mation-str="JSON.parse(item).clinicName"
              @deletFun="clinicDelet(JSON.parse(item))"
            ></tag>
          </div>
        </div>
        <div class="flexLeft">
          <div class="inputTitleNopoint">当前选择默认诊所:</div>
          <div style="color: #508fcc">
            {{ JSON.parse(chooseClinicList[0]).clinicName }}
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 医生标签 -->
    <div>
      <div class="addDoctorTitle">医生标签</div>
      <div style="padding: 16px 0 20px 0">
        <el-input
          v-model="tagStr"
          placeholder="输入标签名称,按回车键Enter生成标签"
          @change="tagChange"
        ></el-input>
      </div>
      <div class="flexLeft">
        <div class="inputTitleNopoint">已选择:</div>
        <div class="flexLeft">
          <tag
            v-for="(item, index) in sendMsg.tags"
            :key="index"
            :mation-str="item"
            :state="true"
            @deletFun="tagDelet"
          ></tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tag from './tag';
// 引入请求
import {
  getAliToken,
  getClinicList,
  addDoctor,
  seachDoctorID,
  editDoctor
} from '@/api/operDocterAdmin';
// import { getDictMap } from '@/api/system/dictDetail';
import { getUUID } from '@/utils/index';
export default {
  components: {
    tag
  },
  props: [
    'edit',
    'doctorProfessional',
    'genderList',
    'luomuLeavel',
    'doctorId'
  ],
  data() {
    return {
      imgUrl: '',
      // 上传的地址
      uploadImgUrl: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '1',
          label: '北京烤鸭'
        },
        {
          value: '2',
          label: '北京烤鸭'
        },
        {
          value: '3',
          label: '北京烤鸭'
        },
        {
          value: '4',
          label: '北京烤鸭'
        },
        {
          value: '5',
          label: '北京烤鸭'
        },
        {
          value: '6',
          label: '北京烤鸭'
        },
        {
          value: '7',
          label: '北京烤鸭'
        },
        {
          value: '8',
          label: '北京烤鸭'
        },
        {
          value: '9',
          label: '北京烤鸭'
        }
      ],
      value: '',
      input: '',
      sendMsg: {
        avatar: '',
        doctorName: '',
        level: '',
        gender: '',
        mobile: '',
        packageRuleId: '',
        practiceYear: '',
        proRuleId: '',
        professional: '',
        receiveType: '',
        tags: [],
        typeCode: '',
        clinicIdList: []
      },
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      // 诊所下拉数据
      clinicList: [],
      // 已选择诊所
      chooseClinicList: ['{}'],
      tagStr: ''
    };
  },

  mounted() {
    // 获取诊所列表
    this.getClinicListFun();
  },
  methods: {

    // 上传前获取阿里云权限
    beforeUpload(file) {
      const self = this;
      console.log('调用a');
      return new Promise((resolve, reject) => {
        getAliToken()
          .then((response) => {
            self.uploadImgUrl = response.host;
            console.log(file.name, getUUID());
            self.dataObj.policy = response.policy;
            self.dataObj.signature = response.signature;
            self.dataObj.ossaccessKeyId = response.accessid;
            self.dataObj.key = response.dir + getUUID() + `_${file.name}`;
            self.dataObj.dir = response.dir;
            self.dataObj.host = response.host;
            console.log(self.dataObj);
            resolve(true);
          })
          .catch((err) => {
            console.warn(err);
            reject(false);
          });
      });
    },
    // 上传成功钩子
    handleAvatarSuccess(e) {
      console.log(e);
    },
    // 获取诊所列表
    getClinicListFun(req) {
      getClinicList(req).then((e) => {
        this.clinicList = e.content;
        if (!this.edit) {
          // 默认选中项
          this.chooseClinicList = [JSON.stringify(e.content[0])];
          this.sendMsg.clinicIdList = [e.content[1].id];
        } // 如果是编辑状态
        if (this.edit) {
          const that = this;
          seachDoctorID(this.doctorId).then((doctorMation) => {
            that.sendMsg = doctorMation;
            doctorMation.clinicIdList.forEach((iditem) => {
              that.clinicList.forEach((listItem) => {
                if (iditem == listItem.id) {
                  that.chooseClinicList = [];
                  that.chooseClinicList.push(JSON.stringify(listItem));
                }
              });
            });
          });
        }
      });
    },
    // 诊所选择change事件
    clinicChange(e) {
      console.log(e);
      const arr = e.map((item, index) => {
        // this.sendMsg.clinicIdList.push(JSON.parse(e).id
        return JSON.parse(item).id;
      });
      console.log(arr);
      this.sendMsg.clinicIdList = arr;
      // console.log(this.sendMsg.clinicIdList);
    },
    // 标签回车事件
    tagChange(e) {
      this.sendMsg.tags.push(e);
      this.tagStr = '';
    },
    // 删除标签事件
    tagDelet() {
      this.sendMsg.tags.pop();
    },
    // 删除诊所
    clinicDelet(item) {
      console.log(item);
      this.chooseClinicList.forEach((e, index) => {
        if (JSON.parse(e).id == item.id) {
          this.chooseClinicList.splice(index, 1);
        }
      });
      this.sendMsg.clinicIdList.forEach((e, index) => {
        if (e == item.id) {
          this.sendMsg.clinicIdList.splice(index, 1);
        }
      });
      // this.chooseClinicList.splice(index,1)
      // this.sendMsg.clinicIdList
    },
    // 新增医生接口
    addDoctor() {
      addDoctor(this.sendMsg).then((e) => {
        console.log(e);
      });
    },

    // 修改医生方法
    EditDoctorFun() {
      this.sendMsg.id = this.doctorId;
      editDoctor(this.sendMsg).then((e) => {
        console.log(e);
      });
    }
  }
};
</script>

<style scoped lang='scss'>
// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.addDoctor {
  font-size: 14px;

  //   表单标题
  .inputTitle {
    white-space: nowrap;
    padding-right: 32px;
  }
  .inputTitle::before {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ea5f5f;
    border-radius: 4px;
    margin: 0 4px 2px 0;
  }
  // 不带点的标题
  .inputTitleNopoint {
    white-space: nowrap;
    padding-right: 32px;
    padding: 0 32px 0 12px;
  }
}
</style>
